<template>
    <a-cascader
      :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
      :options="areaData"
      :placeholder="placeholder"
      v-model="selectedValues"
      @change="onChange"
    />
  </template>
  <script>
  import areaData from "./areaData";
  export default {
    name: "areaSelect",
    props: {
      placeholder: {
        type: String,
        default: "请选择省市区",
      },
      defaultValue: {
        type: Array,
        default() {
          return [];
        },
      },
    },
    data() {
      return {
        //地区数据
        areaData,
        //选择的数据
        selectedValues: [],
      };
    },
    created() {
      if (this.defaultValue.length) {
        this.selectedValues = [...this.defaultValue];
        console.log("this.defaultValue", this.selectedValues);
        
      }
    },
    watch: {
      defaultValue(newValue) {
        if (newValue.length) {
          this.selectedValues = newValue;
        } else {
          this.selectedValues = [];
        }
      },
    },
    methods: {
      //选择好之后的回调
      onChange(value) {
        this.$emit("change", value);
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  </style>